<template>
  <div class="body">
    <el-container>
      <navbar></navbar>
    </el-container>
    <el-container class="page-index">
      <el-container class="page-index-title">
        <carousel></carousel>
      </el-container>
      <el-container class="page-index-module">
        <el-container class="module-body">
          <el-header class="module-title">商家推荐</el-header>
          <el-main style="display: flex;justify-content: space-between">
            <el-row :gutter="2" >
              <el-col :span="6" v-for="info in items_info_sup" :key="index" style="display: flex; flex-direction: column;align-items: center;padding:20px;"
                      class="demo-image__lazy "  >
                <div class="gutter module-body-card" @click="selectItem(info)">
                  <el-image
                    style="width:80%;display: inline-block"
                    :src="info.item_picture">
                  </el-image>
                  <div style="display:flex;align-items: center;flex-direction: column">
                    <div style="font-weight: 550;letter-spacing: 0.5px">{{info.item_name}}</div>
                    <div>￥ {{info.item_price}}</div>
                    <el-button type="text">查看详情</el-button>
                  </div>
                </div>

              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
    <el-container>
      <page_footer></page_footer>
    </el-container>
  </div>
</template>

<script>
import Page_footer from "../components/page_footer";
import Items_card from "../components/items_card";
import Carousel from "../components/carousel";
import Navbar from "../components/navbar";

export default {
  name: "seller_index",
  components: {Page_footer, Items_card, Carousel, Navbar},
  data(){
    return{
      is_login:this.$store.state.user.is_login,
      type_id:this.$store.state.user.type_id,
      activeIndex: '1',
      items_info_sup: this.$store.state.items.items_info_sup,
      disUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      page_obj:{
        page: 1,
        page_size: 10
      }
    }
  },
  methods:{
    selectItem(obj){
      this.$store.dispatch('items/getItemDetailSup', {item_id: obj.item_id})
        .then(() => {
          this.$router.push('/items_details')
          this.$message.success('查看详情');
        }).catch(e => {
        this.$message.error('查看失败');
      })
    }
  },
  created(){
    this.$store.state.items.index_page=2;
    console.log(this.$store.state.items.index_page)
    this.$store.dispatch('items/getItemListSup',this.page_obj)
      .then(() => {
        this.$message.success('商品页 商品信息获取成功！');
        this.items_info_sup= this.$store.state.items.items_info_sup;
      }).catch(e=> {
      this.$message.error('商品信息获取失败');
    })
  }
}
</script>

<style scoped>
.body{
  min-height: 100%;
  margin:0;
  position: relative;
}
.page-index{
  background-color: #fafafa;
  display: flex;
  align-items: center;
  flex-direction: column;
  bottom: 10%;
}
.page-index-title{
  justify-content: space-between;
  display: flex;
  width: 100%;
}
.page-index-module{
  width: 70%;
  margin-bottom: 10%;
}
.module-body{
  width: 70%;
}
.module-title{
  color: #000000;
  font-size: 25px;
  background-color: transparent;
  border-bottom: solid 1px #e6e6e6;
}
.module-body-card{
  background-color: #ffffff;
  border-radius: 5px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.module-body-card:hover{
  transform: translate(-1px,-1px);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,.25);
}
.module-body-card .el-image{
  padding:20px;
}

</style>
